<template>
  <div class="modify-info-container">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="logo-title">
        <div class="logo">WY</div>
        <div class="title-group">
          <h1>吾悦影院管理系统（WY-CINEMA）</h1>
          <div class="slogan">“吾悦，纵向快乐生活~”</div>
        </div>
      </div>
      <div class="user-actions">
        <el-button type="text" class="action-btn">
          <el-icon><User /></el-icon> {{ currentUser.name || '管理员' }}
        </el-button>
        <el-button type="text" class="action-btn" @click="logout">
          <el-icon><SwitchButton /></el-icon> 退出
        </el-button>
      </div>
    </div>

    <div class="main-content">
      <!-- 左侧菜单 -->
      <div class="sidebar">
        <div class="sidebar-header">
          <div class="sidebar-avatar">{{ avatarText }}</div>
          <div class="sidebar-user">
            <h3>{{ userInfo.name || '管理员' }}</h3>
            <p>{{ currentUser.role || '超级管理员' }}</p>
          </div>
        </div>

        <h2 class="sidebar-title"><el-icon><Menu /></el-icon> 用户中心</h2>
        <ul class="sidebar-menu">
          <li class="active"><el-icon><UserFilled /></el-icon> 个人信息</li>
          <li><el-icon><Lock /></el-icon> 修改密码</li>
          <li><el-icon><Setting /></el-icon> 系统设置</li>
          <li><el-icon><Bell /></el-icon> 通知消息</li>
          <li><el-icon><Document /></el-icon> 操作日志</li>
        </ul>
      </div>

      <!-- 右侧内容区 -->
      <div class="content-card">
        <div class="card-header">
          <div class="card-title">
            <el-icon><Edit /></el-icon>
            <span>修改个人信息</span>
          </div>
          <div class="last-login">上次登录: {{ lastLoginTime }}</div>
        </div>

        <div class="user-profile">
          <div class="avatar-container">
            <div class="avatar">{{ avatarText }}</div>
            <el-button class="change-avatar" @click="changeAvatar">
              <el-icon><Camera /></el-icon> 更换头像
            </el-button>
          </div>

          <div class="user-details">
            <div class="user-info">
              <div class="info-grid">
                <div class="info-item">
                  <div class="info-label"><el-icon><User /></el-icon> 用户ID</div>
                  <div class="info-value">{{ currentUser.userId || 'ADMIN2023' }}</div>
                </div>
                <div class="info-item">
                  <div class="info-label"><el-icon><Key /></el-icon> 用户角色</div>
                  <div class="info-value">{{ currentUser.role || '超级管理员' }}</div>
                </div>
                <div class="info-item">
                  <div class="info-label"><el-icon><Calendar /></el-icon> 注册时间</div>
                  <div class="info-value">{{ currentUser.registerTime || '2023-06-01' }}</div>
                </div>
                <div class="info-item">
                  <div class="info-label"><el-icon><Refresh /></el-icon> 最后修改</div>
                  <div class="info-value">{{ currentUser.lastModified || '2023-10-10 09:15:33' }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="form-section">
          <div class="section-header">
            <div class="section-icon">
              <el-icon><User /></el-icon>
            </div>
            <div>
              <div class="section-title">基本信息</div>
              <div class="section-subtitle">更新您的个人信息</div>
            </div>
          </div>

          <div class="form-grid">
            <div class="form-group">
              <label><el-icon><User /></el-icon> 姓名</label>
              <el-input v-model="userInfo.name" placeholder="请输入姓名"></el-input>
            </div>
            <div class="form-group">
              <label><el-icon><Female /></el-icon> 性别</label>
              <el-select v-model="userInfo.gender" placeholder="请选择性别">
                <el-option label="男" value="male"></el-option>
                <el-option label="女" value="female"></el-option>
                <el-option label="保密" value="secret"></el-option>
              </el-select>
            </div>
            <div class="form-group">
              <label><el-icon><Iphone /></el-icon> 手机号码</label>
              <el-input v-model="userInfo.phone" placeholder="请输入手机号码"></el-input>
            </div>
            <div class="form-group">
              <label><el-icon><Message /></el-icon> 电子邮箱</label>
              <el-input v-model="userInfo.email" placeholder="请输入电子邮箱"></el-input>
            </div>
            <div class="form-group">
              <label><el-icon><Briefcase /></el-icon> 职位</label>
              <el-input v-model="userInfo.position" placeholder="请输入职位"></el-input>
            </div>
            <div class="form-group">
              <label><el-icon><OfficeBuilding /></el-icon> 部门</label>
              <el-input v-model="userInfo.department" placeholder="请输入部门"></el-input>
            </div>
          </div>
        </div>

        <div class="form-section">
          <div class="section-header">
            <div class="section-icon">
              <el-icon><Film /></el-icon>
            </div>
            <div>
              <div class="section-title">影院信息</div>
              <div class="section-subtitle">更新您的影院信息</div>
            </div>
          </div>

          <div class="form-grid">
            <div class="form-group">
              <label><el-icon><Tickets /></el-icon> 影院名称</label>
              <el-input v-model="cinemaInfo.name" placeholder="请输入影院名称"></el-input>
            </div>
            <div class="form-group">
              <label><el-icon><Phone /></el-icon> 影院电话</label>
              <el-input v-model="cinemaInfo.phone" placeholder="请输入影院电话"></el-input>
            </div>
            <div class="form-group" style="grid-column: span 2;">
              <label><el-icon><Location /></el-icon> 影院地址</label>
              <el-input v-model="cinemaInfo.address" placeholder="请输入影院地址"></el-input>
            </div>
            <div class="form-group">
              <label><el-icon><Clock /></el-icon> 营业时间</label>
              <el-input v-model="cinemaInfo.hours" placeholder="例: 09:00-23:00"></el-input>
            </div>
            <div class="form-group">
              <label><el-icon><Camera /></el-icon> 影院照片</label>
              <div class="upload-area" @click="uploadPhoto">
                <div class="upload-icon">
                  <el-icon><Upload /></el-icon>
                </div>
                <div class="upload-text">点击或拖拽上传照片</div>
                <div class="upload-hint">支持 JPG, PNG 格式，最大 5MB</div>
              </div>
            </div>
          </div>
        </div>

        <div class="form-actions">
          <el-button class="btn-cancel" @click="goBack">
            <el-icon><Close /></el-icon> 取消
          </el-button>
          <el-button class="btn-save" type="primary" @click="saveChanges">
            <el-icon><Check /></el-icon> 保存修改
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  User, SwitchButton, Menu, UserFilled, Lock, Setting, Bell, Document,
  Edit, Camera, Upload, Close, Check, Key, Calendar, Refresh,
  Female, Iphone, Message, Briefcase, OfficeBuilding, Film,
  Tickets, Phone, Location, Clock
} from '@element-plus/icons-vue'

const router = useRouter()

// 当前用户信息
const currentUser = ref({
  name: '管理员',
  userId: 'ADMIN2023',
  role: '超级管理员',
  registerTime: '2023-06-01',
  lastModified: '2023-10-10 09:15:33'
})

// 上次登录时间
const lastLoginTime = ref('2023-10-15 14:30:25')

// 用户信息表单
const userInfo = ref({
  name: '管理员',
  gender: 'male',
  phone: '13800138000',
  email: 'admin@wuyue-cinema.com',
  position: '系统管理员',
  department: '技术部'
})

// 影院信息表单
const cinemaInfo = ref({
  name: '吾悦国际影城',
  phone: '400-888-9999',
  address: '北京市朝阳区建国路88号',
  hours: '09:00-23:00',
  photos: []
})

// 头像文字（取名字首字）
const avatarText = computed(() => {
  return userInfo.value.name ? userInfo.value.name.charAt(0) : '管'
})

// 更换头像
const changeAvatar = () => {
  ElMessage.info('更换头像功能')
}

// 上传照片
const uploadPhoto = () => {
  ElMessage.info('上传影院照片')
}

// 保存修改
const saveChanges = () => {
  ElMessage.success('信息更新成功')
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 退出登录
const logout = () => {
  // 清除登录状态
  localStorage.removeItem('token')
  sessionStorage.removeItem('userInfo')

  // 跳转到登录页面
  router.push('/login')

  // 显示提示信息
  ElMessage.success('您已安全退出系统')
}

// 组件挂载时获取用户信息
onMounted(() => {
  // 这里可以从Vuex或localStorage获取用户信息
  const storedUser = localStorage.getItem('userInfo')
  if (storedUser) {
    try {
      const user = JSON.parse(storedUser)
      currentUser.value = user
      userInfo.value = { ...userInfo.value, ...user }
    } catch (e) {
      console.error('解析用户信息失败:', e)
    }
  }
})
</script>

<style scoped>
/* 这里复制上面提供的完整CSS样式 */
</style>